<template>
    <div class="myPending-wrap">
        <div class="progressBar-style">
            <progressBar :progress="getData.percent" backgroundColor="rgba(11,130,255)"></progressBar>
        </div>
        <div class="title-left">
            当年累计完成任务： <span>1321</span>个
        </div>
        <div class="title-right">
            年度累计任务： <span>1321个</span>
        </div>
        <titleComponent title="近6个月任务量及完成情况" class="second-title-style"></titleComponent>
        <div class="trendEchart-wrap">
            <LineAreaChart :isSmooth="true"></LineAreaChart>
        </div>
    </div>
</template>

<script>
    import progressBar from "@/components/progressBar";
    import titleComponent from "./titleComponent";
    import LineAreaChart from "./LineAreaChart";
    export default {
        name: "myPending",
        components: {
            progressBar,
            titleComponent,
            LineAreaChart
        },
        props: {
            getData: {
                type: Object,
                default: () => {
                    return {
                        percent: 20
                    }
                }
            }
        },
        data() {
            return {

            }
        }
    }
</script>

<style scoped lang="less">
.myPending-wrap {
    box-sizing: border-box;
    position: absolute;
    width: 50%;
    height: 215px;
    top: 35px;
    overflow: hidden;
    //background: rgba(255, 255, 0, 0.27);
    .progressBar-style {
        position: relative;
        margin-top: 10px;
        margin-left: 10px;
        width: calc( 100% - 20px );
        height: 35px;
    }
    .title-left {
        position: absolute;
        font-size: 14px;
        left: 10px;
        top: 50px;
        span {
            font-weight: bolder;
            font-size: 16px;
        }
    }
    .title-right {
        position: absolute;
        font-size: 14px;
        right: 10px;
        top: 50px;
        span {
            font-weight: bolder;
            font-size: 16px;
        }
    }
    .second-title-style {
        position: absolute;
        top: 78px;
    }
    .trendEchart-wrap {
        position: absolute;
        width: calc(100% - 30px);
        height: 100px;
        top: 110px;
        left: 20px;
        //background: rgba(255, 255, 0, 0.27);
    }
}
</style>
